<template>
  <div class="boxtwo"></div>
</template>

<script setup lang="ts">
import { themePinia } from "@/libs/pinia/theme";
import * as echarts from "echarts";
import { computed, onMounted } from "vue";

onMounted(() => {
  const page = document.querySelector(".boxtwo") as HTMLElement;
  type EChartsOption = echarts.EChartsOption;

  var myChart = echarts.init(page);
  var option: EChartsOption;

  option = {
    title: {
      text: "实时监控",
      subtext: "Fake Data",
      left: "center",
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      left: "left",
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: "50%",
        data: [
          { value: 1048, name: "Search Engine" },
          { value: 735, name: "Direct" },
          { value: 580, name: "Email" },
          { value: 484, name: "Union Ads" },
          { value: 300, name: "Video Ads" },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };

  window.addEventListener("resize", function (event) {
    myChart.resize();
  });

  option && myChart.setOption(option);
});
</script>

<style scoped lang="scss">
.boxtwo {
  display: flex;
  width: 100%;
  height: 100%;
}
</style>
